<template>
    <!-- 蒙版 -->
    <div 
        v-if="visible" 
        class="v3-tour-container"
    >
        <!-- 高亮区域（可选，用于添加边框或阴影） -->
        <TourPopover v-model="popoverVisible" :viewStyle="viewStyle" :offset="offset" :placement="placement">
            <template #header>
                <!-- 默认头部 -->
                <div v-if="!slots.header" class="tour-header">
                    <span class="tour-title">{{ props.title }}</span>
                    <div class="tour-close" @click="close"><Close class="tour-close__icon"/></div>
                </div>
                <!-- 自定义头部 -->
                <div v-else class="custom-header">
                    <slot name="header"></slot>
                </div>
            </template>

            <template #content>
                <component :is="steps[currentIndex]?.vnode" />
            </template>

            <template #footer>
                <!-- 默认底部 -->
                <div v-if="!slots.footer" class="tour-footer">
                    <!-- 指示灯 （当初处于第几步骤） -->
                    <div class="indicator-light">
                        <div v-for="(lightItem, lightIndex) in steps" :key="lightIndex" :class="{ bright: currentIndex === lightIndex }" class="light-item"></div>
                    </div>
                    <!-- 上一步、下一步、结束导览、操作按钮 -->
                    <div class="opera-btn">
                        <div v-if="currentIndex > 0" class="tour-button" @click="prev">上一步</div>
                        <div v-if="currentIndex < steps.length - 1" class="tour-button" type="primary" @click="next">下一步</div>
                        <div v-if="currentIndex === steps.length - 1" class="tour-button" type="primary" @click="close">结束导览</div>
                    </div>
                </div>

                <!-- 自定义底部 -->
                <div v-else class="custom-footer">
                    <slot name="footer"></slot>
                </div>
            </template>
            <!-- 窗口 -->
            <div :style="viewStyle" class="tour-view"></div>
        </TourPopover>
        

        <div :style="[{ height: viewStyle.top }]" class="tour-top"></div>
        <div :style="[{ height: `calc(100% - ${viewStyle.top} - ${viewStyle.height})` }]" class="tour-bottom"></div>
        <div :style="[{ width: viewStyle.left }]" class="tour-left"></div>
        <div :style="[{ width: `calc(100% - ${viewStyle.left} - ${viewStyle.width})` }]" class="tour-right"></div>
    </div>
</template>

<script setup>
import { ref, computed, useSlots } from 'vue'
import hook from './hook'
import Close from './svg/close.vue'
// 样式
import '../style/tour.css'
// popover组件
import TourPopover from './Popover/index.vue'


const visible = defineModel()
const slots = useSlots()

const props = defineProps({
    // 包含dom的步骤数据
    steps: {
        type: Array,
        default: () => []
    },
    // 偏移量
    offset: {
        type: Number,
        default: 10
    },
    // 标题
    title: {
        type: String,
        default: 'Save'
    },
    // 视口内边距
    padding: {
        type: Number,
        default: 6
    },
    // 等待scrollIntoview完毕的时间, 如出现白屏可适当增大此值
    whiteScreenDuration: {
        type: Number,
        default: 80
    },
    // 出现在视口的什么位置
    placement: {
        type: String,
        default: 'top'
    },
    // 出现在可视区域的位置
    block: {
        type: String,
        default: 'center'
    }
})

const steps = computed(() => props.steps)

// popover显示隐藏
const popoverVisible = ref(false)
// 当前步骤索引
const currentIndex = ref(0)
const { viewStyle, next, prev, close } = hook({ currentIndex, steps, popoverVisible, visible, padding: props.padding, whiteScreenDuration: props.whiteScreenDuration, block: props.block })

// 暴露方法及属性，用于自定义调用
defineExpose({
    instance: {
        next,
        prev,
        close,
        currentIndex
    }
})
</script>
